<template>
  <div class="company-container">
    <div class="company-content">
      <h1 class="company-title">会社概要</h1>
      
      <div class="company-info">
        <div class="company-name-section">
          <h2 class="company-name">株式会社<br>クラウドワークス</h2>
        </div>
        
        <div class="info-table">
          <div class="info-row">
            <div class="info-label">所在地</div>
            <div class="info-content">
              <div class="address-item">
                <br>
                本社``<br>
                〒150-6006<br>
                東京都渋谷区恵比寿四丁目20番3号 恵比寿ガーデンプレイスタワー6階<br>
                <a href="/">Googleマップで見る</a>
              </div>
              <div class="address-item">
                福岡支社<br>
                〒812-0011<br>
                福岡県福岡市博多区博多駅前一丁目1番1号 博多新三井ビルディング8階<br>
                <a href="/">Googleマップで見る</a>
              </div>
              <div class="address-item">
                大阪支社<br>
                〒530-0014<br>
                大阪府大阪市北区鶴野町4番11号 朝日プラザ梅田8階<br>
                <a href="/">Googleマップで見る</a>
                <br>
              </div>
            </div>
          </div>
          
          <div class="info-row">
            <div class="info-label">代表者</div>
            <div class="info-content">代表取締役社長 兼 CEO 吉田 浩一郎</div>
          </div>
          
          <div class="info-row">
            <div class="info-label">設立</div>
            <div class="info-content">2011年11月11日</div>
          </div>
          
          <div class="info-row">
            <div class="info-label">資本金</div>
            <div class="info-content">5億9876万円 ※2024年12月末現在</div>
          </div>
          
          <div class="info-row">
            <div class="info-label">事業内容</div>
            <div class="info-content">
             	<br>
              フリーランス人材を中心とした人材エージェント事業及び<br>
              企業の生産性を向上するDXコンサルティングサービスの運営<br>
              <br>
              ＜許可番号＞<br>
              労働者派遣事業許可番号 派13-306556 <br>
              有料職業紹介事業許可番号 13-ユ-313424<br>
              <br>
            </div>
          </div>
          
          <div class="info-row">
            <div class="info-label">グループ会社</div>
            <div class="info-content">
              <br>
              <a href="/">Peaceful Morning株式会社別タブで開く</a><br>
              <a href="/">株式会社シューマツワーカー別タブで開く</a><br>
              <a href="/">株式会社ユウクリ別タブで開く</a><br>
              <a href="/">株式会社AI tech別タブで開く</a><br>
              <a href="/">株式会社ソニックムーブ別タブで開く</a><br>
              <a href="/">株式会社CLOCK・IT別タブで開く</a><br>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 公司概要页面
</script>

<style scoped>
a{
  color: #3d4449;
}
.company-container {
  min-height: 100vh;
  background-color: white;
  padding: 20px;
}

.company-content {
  max-width: 900px;
  margin: 0 auto;
  background-color: white;
  padding: 30px 50px;
}

.company-title {
  font-size: 38px;
  font-weight: bold;
  /* text-align: center; */
  margin-bottom: 30px;
  color: #333;
}

.company-name-section {
  text-align: left;
  margin-bottom: 30px;
}

.company-name {
  font-size: 26px;
  font-weight: 400;
  color: #333;
  line-height: 1.5;
}

.info-table {
  border-top: 1px solid #ddd;
  width: 100%;
}

.info-row {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
  align-items: center;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  width: 100px;
  font-weight: bolder;
  color: #333;
  flex-shrink: 0;
  margin-left: 50px;
  padding-right: 30px;
  font-size: 14px;
}

.info-content {
  flex: 1;
  color: #333;
  line-height: 1.85;
  font-size: 12px;
  margin-left: 250px;
}

.address-item {
  margin-bottom: 15px;
}

.address-item:last-child {
  margin-bottom: 0;
}

.address-item strong {
  color: #333;
  font-weight: bold;
}

/* 平板设备适配 */
@media (max-width: 768px) {
  .company-container {
    padding: 15px;
  }
  
  .company-content {
    padding: 20px 25px;
    max-width: 100%;
  }
  
  .company-title {
    font-size: 28px;
    margin-bottom: 25px;
    text-align: center;
  }
  
  .company-name {
    font-size: 20px;
    text-align: center;
  }
  
  .company-name-section {
    text-align: center;
    margin-bottom: 25px;
  }
  
  .info-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0;
  }
  
  .info-label {
    width: 100%;
    margin-left: 0;
    margin-bottom: 10px;
    padding-right: 0;
    font-size: 16px;
    font-weight: bold;
  }
  
  .info-content {
    margin-left: 0;
    font-size: 14px;
    width: 100%;
  }
}

/* 手机设备适配 */
@media (max-width: 480px) {
  .company-container {
    padding: 10px;
  }
  
  .company-content {
    padding: 15px 20px;
  }
  
  .company-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .company-name {
    font-size: 18px;
    line-height: 1.4;
  }
  
  .company-name-section {
    margin-bottom: 20px;
  }
  
  .info-row {
    padding: 15px 0;
  }
  
  .info-label {
    font-size: 15px;
    margin-bottom: 8px;
  }
  
  .info-content {
    font-size: 13px;
    line-height: 1.6;
  }
  
  .address-item {
    margin-bottom: 12px;
  }
  
  a {
    word-break: break-all;
    display: inline-block;
    margin-top: 5px;
  }
}

/* 超小屏幕设备适配 */
@media (max-width: 360px) {
  .company-content {
    padding: 10px 15px;
  }
  
  .company-title {
    font-size: 20px;
  }
  
  .company-name {
    font-size: 16px;
  }
  
  .info-label {
    font-size: 14px;
  }
  
  .info-content {
    font-size: 12px;
  }
}
</style>